@extends('layout.default')

@section('stylesheet')
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.26.0/css/jquery.fileupload.min.css"/>
@stop
@section('layout.content')

  <div class="space-12"></div>
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal" method="post" enctype="multipart/form-data" autocomplete="off">
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="name"> <b><span class="red">*</span> 礼品名称：</b>
          </label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="name" name="name" placeholder="礼品名称" value=""/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="price"> <b><span class="red">*</span> 兑换积分：</b>
          </label>
          <div class="col-sm-2">
            <input type="text" class="form-control" id="price" name="price" placeholder="礼品兑换积分" maxlength="3"/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="link"> <b>图片（正方形）： </b></label>
          <div class="col-sm-8 set-slider">
            <a href="#" data-rel="colorbox" class="fileinput-button">
              <img style="width:150px;" src="/assets/images/plus.fw.png" class="banner">
              <input type="file" name="file"/>
            </a>
          </div>
        </div>


        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="branch"> <b>所属分支：</b> </label>
          <label class="col-sm-6 control-label align-left">
            <input type="hidden" id="branch" value="{{Auth('admin')->user()->branch->id}}">
            {{Auth('admin')->user()->branch->name}}
          </label>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right"> </label>
          <div class="col-sm-6">
            <p>标注星号(<b><span class="red">*</span></b>)为必填项。</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right"> </label>
          <div class="col-sm-4">
            <button type="button" class="btn btn-primary submit">
              <i class="ace-icon fa fa-check"></i>
              <span class="">确定</span>
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>
@stop

@section('javascript')

  <script type="text/javascript">
      $(function () {

          $("input[name='file']").change(function () {
              var objUrl = getObjectURL(this.files[0]);
              console.log("objUrl = " + objUrl);
              if (objUrl) {
                  $(".banner").attr("src", objUrl);
              }
          });

          function getObjectURL(file) {
              var url = null;
              if (window.createObjectURL != undefined) { // basic
                  url = window.createObjectURL(file);
              } else if (window.URL != undefined) { // mozilla(firefox)
                  url = window.URL.createObjectURL(file);
              } else if (window.webkitURL != undefined) { // webkit or chrome
                  url = window.webkitURL.createObjectURL(file);
              }
              return url;
          }


          $('.submit').on('click', function () {
              var formData = new FormData();
              formData.append("_token", $("input[name='_token']").val());
              formData.append("name", $("input[name='name']").val());
              formData.append("price", $("input[name='price']").val());
              formData.append('image', $("input[name='file']")[0].files[0]);

              var uri = '{{route('point.gift.store')}}';
              $.ajax({
                  url: uri,
                  type: 'POST',
                  dataType: "json",
                  cache: false,
                  data: formData,
                  processData: false,
                  contentType: false,
                  success: function (data) {
                      layer.msg(data.message, {shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });
                  },
                  error: function (data) {
                      layer.msg(data.responseJSON.message);
                  }
              });
              /*$.post(uri, {
                '_token':$("input[name='_token']").attr('value'),
                'name': $("input[name='name']").val(),
                'price': $("input[name='price']").val(),
                'image': formData,
                'is_submit': true
              }, function(data) {
                console.log(data);
                layer.msg(data.message, { shift: -1 }, function(){
                  if(data.status === true && data.url != null ){
                    $(window).attr('location', data.url);
                  }
                });

              },'json').error(function(data){
                layer.msg(data.responseJSON.message);
              }); */

          });


      });
  </script>
@stop